<template>
  <view class="settle">
    
    <view class="Box">
      <view class="my-radio">
          <radio  :checked="chck" color="#c00000" @click="check(carlist)"/><text>全选</text>
      </view>
      
      <view class="price-count">
        <text>合计：￥{{checkedGoodsAmount}}</text>
      </view>
    </view>
    
    <view class="btn">
      <button type="warn" size="mini" @click="payMoney">结算({{payNum}})</button>
    </view>
    
    
  </view>
</template>

<script>
  import {mapState,mapGetters,mapMutations} from 'vuex'
  
  export default {
    name:"my-settle",
    computed:{
      ...mapGetters('my_car',['payNum','checkedGoodsAmount']),
      ...mapGetters('my_adress',['addstr']),
      ...mapState('my_car',['carlist']),
      ...mapState('my_user',['token'])
    },
    
    data() {
      return {
        chck:false,
        time:3,
        clearT:null
      };
    },
    
    methods:{
      ...mapMutations('my_car',['checkGods','notCkGods']),
      ...mapMutations('my_user',['upReInfo']),
      
      check(w){
        this.chck = !this.chck
        if(this.chck == true){
          this.checkGods(w)
        }else{
          this.notCkGods(w)
        }        
      },
      
      payMoney(){
        if(this.payNum==0) return uni.showMsg('请选择商品')
        if(!this.addstr) return uni.showMsg('请选择收货地址')
        if(this.token=="") return this.delayNavigate()
      },
      
      showTips(time){
        uni.showToast({
          title:'未登录!'+time+'后跳转至登录页面',
          icon:'none',
          mask:true,//页面透明遮罩层
          duration:1500//1.5后消失
        })
      },
      
      delayNavigate(){
        this.time = 3//时间每次重置为3
        this.showTips(this.time)//1.弹消息，time=3
        this.clearT = setInterval(()=>{//2.time--
          this.time--
          if(this.time<=0){//3.time=0 clearT
            clearInterval(this.clearT)
            uni.switchTab({//4.tabar跳转登录
              url:"/pages/my/my",
              success: () => {//5.跳转的地址存vuex
                this.upReInfo({
                  openType:"switchTab",
                  from:"/pages/cart/cart"
                })
              }
            })
          }
          this.showTips(this.time)
        },1000)
      }
      
      
      
      
      
    },
    
  }
</script>

<style lang="scss">
.settle{
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: space-between;  
  .Box{
    border: 1px solid #e3e3e3;
    height: 100%;
    width: 80%;
    display: flex;
    align-items : center;
    background-color: white;
    padding-left: 5px;
    
    .my-radio{display: flex;align-items : center;}
    .price-count{margin-left: 40px;}
  }
  .btn{
    height: 100%;
    width: 20%;
    background-color: #e64340;
    button{
      width: 100%;
      height: 100%;
      display:flex;
      flex-direction:column; // 改变主轴方向
      justify-content:center; // 定义主轴的对齐方式
    }
  }
}
</style>